<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网购物车</title>

<!-- 次页面已经放入front目录下     根目录 -->
<base href="../"/>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/cart.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        <div class="header-info" id="login_info">
            <div class="login-info" v-if="isLogin">
            	<a href="user.html" title="个人信息" target="blakn">欢迎您：{{nickName}}</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            <div class="login-info" v-else>
            	<a href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="front/order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" id='search_gname'/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>

            <!-- 类型渲染 -->
            <div class="search_item" id="search_item">
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0, '')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types" 
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- vue给标签绑定自定义数据 ： data-tno -->
            </div>
        </div>
    </div>
</header>
<!-- 购物车 -->
<article id="app">
    <div class="cart_con">
    	<h2 class="total_count">全部商品<em id="totalcount">1</em>件</h2>
    	<div class="cart_list_th clearfix">
        	<ul>
            	<li class="col01">商品名称</li>
            	<li class="col02">商品单位</li>
                <li class="col03">商品价格(元)</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
                <li class="col06">操作</li>
            </ul>
        </div>
    	<div class="cart_list_td clearfix" id="cart_list">
       		<ul v-for="item in carts">
        		<li class="col01"><input type="checkbox" :checked="item.mno ? true : false" @change="changeChecked($event, item)"></li>
            	<li class="col02"><img :src="item.pics"></li>
                <li class="col03">{{item.gname}}<br><em>{{item.price}}元/{{item.unit}}</em></li>
                <li class="col04">{{item.weight}}</li>
                <li class="col05">{{item.price}}</li>
                <li class="col06">
                	<div class="num_add">
                    	<a href="javascript:void(0)" @click="lostOrAdd(item, -1)" class="minus fl">-</a>
                        <input type="text" v-model="item.num" class="num_show fl">
                        <a href="javascript:void(0)" @click="lostOrAdd(item, 1)" class="add fl">+</a>
                    </div>
                </li>
                <li class="col07" v-html="(item.price * item.num).toFixed(2)"></li>
                <li class="col08"><a href="javascript:;" @click="delGoods( item.cno)">删除</a></li>
            </ul>
           
        </div>
    	<div class="setElements">
        	<ul>
            	<li class="col01"><input type="checkbox" checked id="all"></li>
            	<li class="col02"><label for="all">全选</label></li>
                <li class="col03">合计(不含运费)：<span>&yen;</span>
                <em id="totalPrices">{{totalPrices}}</em><br>共计
                <b id="totalNumbers">{{totalCount}}</b>件商品</li>
                <li class="col04"><a href="front/pay.html" target="_blank" @click="gotoPay">去结算</a></li>
            </ul>
        </div>
    </div>
</article>

<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- <script src="js/cart.js" type="text/javascript"></script> -->


<!-- 依次引入相关JS文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<!-- 引入检查登录和类型 购物车 公共js文件 -->
<script type="text/javascript" src="js/base.js"></script>

<script type="text/javascript">
	//构建Vue实例
	let app = new Vue({
		el:"#app",
		data:{
			carts:[], //购物车信息
			totalPrices: 0, //总价
			totalCount:0, //总件数
		},
		mounted(){
			//默认查询用户的所有购物车详情
			axios.get("cart/finds").then( result=>{
				if(result.status != 200){
					showMsg("访问出错，请稍候重试...", "red", ()=>{location.href="index.html"});
					return;
				}
				if( result.data.code == 500){
					showMsg("购物车空空如也，马上去选吧", "bule", ()=>{location.href="index.html"});
					return;
				}
				if( result.data.code == 200){
					this.carts = result.data.data;
					//遍历购物车信息
					this.carts.forEach((item, index) =>{
						this.totalCount += item.num; //总数量
						this.totalPrices += item.num * item.price; //总价格
						
						item.mno = 1; //默认选中 我们将这个选中的状态暂存到这个变量中 如果为1 说明选中， 为0 则不选中
					})
					//格式化总价 保留两位小数
					this.totalPrices = this.totalPrices.toFixed(2);
				
					this.$nextTick(function(){  //执行一次 需要视图更新之后
						bindInfo();
					})
				}
			})
			//访问权限
			window.changeAll = this.changeAll;
		},
		methods:{
			changeChecked(event, obj){ //单个商品的选中
				if(event.target.checked ){  //该商品被选中
					obj.mno = 1;
					let checkboxs = $("#cart_list input[type='checkbox']"); //获取所有的多选框
					
					let flag = true;  //全局变量控制
					checkboxs.each(( index, item) =>{
						if( !item.checked){  //说明有商品未被选中
							$("#all").prop("checked", false);
							this.getTotal();
							flag = false;
							return false;
						}
					})
					if( !flag){
						return false;
					}
					
					/*for(let i = 0, len = checkboxs.length; i < len; i ++){
						if( !chexkboxs[i].checked){
							$("#all").prop("checked", false);
							this.getTotal();
							return;
						}
					}*/
					$("#all").prop("checked", true);
				}else{
					obj.mno = 0;
					$("#all").prop("checked", false);
				}
				this.getTotal();
			},
			lostOrAdd(item, num){ //商品数量变化
				let val = item.num;
				if( num < 0 && val <= 1){  //商品减少到1 无法操作
					return;
				}
				//TODO 同步后台更新商品数据
				axios.post("cart/update", qs.stringify({ num, cno: item.cno})).then( result =>{
					if( result.status == 200 && result.data.code == 200){
						item.num += num;
						this.getTotal();
					}
				})
			},
			getTotal(){ //数量变动 总价变化
				this.totalPrices = 0, //总价
				this.totalCount = 0, //总件数
				this.carts.forEach((item, index) =>{
					if( item.mno == 1){ 	//说明该商品被选中 需要统计
						this.totalCount += item.num; //总数量
						this.totalPrices += item.num * item.price; //总价格
					}
				})
				this.totalPrices = parseFloat( this.totalPrices ).toFixed(2); //最后保留两位小数
			},
			changeAll( choic){ //改变所有  全选 全不选
				let flag = choic ? 1 : 0;
				this.carts.forEach((item, index) =>{
					item.mno = flag;  //每个商品的选中状态
				})
				this.getTotal();
			},
			delGoods( cno){  //删除购物车
				if( confirm( "亲桑，确定要删除吗，八嘎牙路？！")){// 如果用户选择确认删除
					axios.post("cart/deletes", qs.stringify({ cno})).then( result =>{
						if( result.status == 200 && result.data.code == 200){
							//将这条数据从集合中删除
							this.carts.forEach((item, index) =>{
								if( cno == item.cno){
									//splice(index, len, [item]) index索引 len 替换 |删除 的长度   item 删除操作的话 item为null
									this.carts.splice(index, 1);
									return false; //结束
								}
							})
							this.getTotal();
							showMsg("购物车删除成功", "green");
							return;
						}
						showMsg("购物车删除失败", "red");
					})
				}
			},
			gotoPay(){  //去支付
				let cnos = [];  //存储购物车编号
				this.carts.forEach( ( item, index)=>{
					//获取你复选框里面的Data-cno属性的值或item.cno
					if( item.mno == 1){
						cnos.push( item.cno); //取出当前对象的cno属性值 即购物车编号
					}
				})
				if( cnos.length <= 0){ //说明未勾选任何商品
					
					showMsg("请选择您要结算的商品。。。", "blue");
					return;
				}
				//采用本地存储 它是属于永久性存储类型
				localStorage.removeItem("cnos");  //先从本地存储中移除这个属性
				localStorage.setItem("cnos", cnos.join(",")); //将数组以逗号拼接成字符串 存到本地的cnos键中
				location.href = "front/pay.html";
			}
		}
	})
	
	//全选或者全不选
	function bindInfo(){
		$("#all").click( function(){
			let flag = $(this).prop("checked");
			$("#cart_list .col01>input").prop("checked", flag);
			changeAll(flag); //同步vue数据
		})	
	}
</script>
</body>
</html>
